<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="cxk">
        <meta name="viewport" content="width=device-width">
        <title>练习</title>
        <style>
            /* span {
                background-image: url("./pic/ali.ico");
                margin: 20;
            } */
            body {
                max-width: 1200px;
                margin: 0 auto;
                background-color: white;
            }
            img {
                display: block;
                margin: 0 auto;
                max-width: 100%;
            }
            table {
                border-collapse: collapse;
                border: 2px solid rgb(200,200,200);
                letter-spacing: 1px;
                font-size: 0.8rem;
            }

            form {
                /* 居中表单 */
                margin: 0 auto;
                width: 400px;
                /* 显示表单的轮廓 */
                padding: 1em;
                border: 1px solid #CCC;
                border-radius: 1em;
                }

                form div + div {
                margin-top: 1em;
                }

                label {
                /* 确保所有label大小相同并正确对齐 */
                display: inline-block;
                width: 90px;
                text-align: right;
                }

                input, textarea {
                /* 确保所有文本输入框字体相同
                    textarea默认是等宽字体 */
                font: 1em sans-serif;

                /* 使所有文本输入框大小相同 */
                width: 300px;
                box-sizing: border-box;

                /* 调整文本输入框的边框样式 */
                border: 1px solid #999;
                }

                input:focus, textarea:focus {
                /* 给激活的元素一点高亮效果 */
                border-color: #000;
                }

                textarea {
                /* 使多行文本输入框和它们的label正确对齐 */
                vertical-align: top;

                /* 给文本留下足够的空间 */
                height: 5em;
                }

                .button {
                /* 把按钮放到和文本输入框一样的位置 */
                padding-left: 90px; /* 和label的大小一样 */
                }

                button {
                /* 这个外边距的大小与label和文本输入框之间的间距差不多 */
                margin-left: .5em;
                }
        </style>
    </head> 

    <body>
        <!-- <svg width="100%" height="100%">
            <rect width="100%" height="100%" fill="red"/>
            <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
            <polygon points="120, 0 240, 255 0, 255" fill="green" />
            <text x="50" y="100" font-famliy="Verdana" font-size="55"
                fill="white" stroke="black" stroke-width="3"
            >
                Hello!
            </text>
        </svg> -->
        <!-- <img 
            srcset="pic-320w.jpg 320w,
                    pic-480w.jpg 480w,
                    pic-800w.jpg 800w"
            sizes="(innerWidth: 320px) 280px,
                   (innerWidth: 510px) 440px,
                    800px"
            src="./pic/pic-800w.jpg" alt="default description"
        > -->
        <!-- <img srcset="./pic/elva-fairy-320w.jpg 320w,
                    ./pic/elva-fairy-480w.jpg 480w,
                    ./pic/elva-fairy-800w.jpg 800w"
            sizes="(max-width: 320px) 280px,
                   (max-width: 480px) 440px,
                    800px"
            src="./pic/elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> -->
        <!-- <img srcset="./pic/elva-fairy-480w.jpg 480w,
                    ./pic/elva-fairy-800w.jpg 800w"
            sizes="(max-width: 600px) 480px,
                800px"
            src="./pic/elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> -->

            <!-- <h1>Animals table</h1>
            <table>
                <tr>
                    <th colspan="2">Animals</th>
                </tr>
                <tr>
                    <th colspan="2">Hippopotamus</th>
                </tr>
                <tr>
                    <th rowspan="2">Horse</th>
                    <td>Mare</td>
                </tr>
                <tr>
                    <td>Stallion</td>
                </tr>
                <tr>
                    <th colspan="2">Crocodile</th>
                </tr>
                <tr>
                    <th rowspan="2">Chicken</th>
                    <td>Hen</td>
                </tr>
                <tr>
                    <td>Rooster</td>
                </tr>
            </table> -->

            <!-- <table>
                <tr>
                  <th>Data 1</th>
                  <th style="background-color: yellow">Data 2</th>
                </tr>
                <tr>
                  <td>Calcutta</td>
                  <td style="background-color: yellow">Orange</td>
                </tr>
                <tr>
                  <td>Robots</td>
                  <td style="background-color: yellow">Jazz</td>
                </tr>
            </table>

            <table>
                <colgroup>
                    <col>
                    <col style="background-color: yellow">
                </colgroup>
                <tr>
                    <th>Data 1</th>
                    <th>Data 2</th>
                </tr>
                <tr>
                    <td>Calcutta</td>
                    <td>Orange</td>
                </tr>
                <tr>
                    <td>Robots</td>
                    <td>Jazz</td>
                </tr>
            </table> -->

            <!-- <table>
                <colgroup>
                    <col>
                    <col>
                    <col style="background-color: aqua;">
                    <col>
                    <col style="background-color: aqua;">
                    <col style="background-color: blue">
                </colgroup>
                <tr>
                    <th>&nbsp;</th>
                    <th>Mon</th>
                    <th>Tues</th>
                    <th>Wed</th>
                    <th>Thurs</th>
                    <th>Fri</th>
                    <th>Sat</th>
                    <th>Sun</th>
                </tr>
                <tr>
                    <th>1st period</th>
                    <td>English</td>
                    <td></td>
                    <td></td>
                    <td>German</td>
                    <td>Dutch</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>2nd period</th>
                    <td>English</td>
                    <td>English</td>
                    <td></td>
                    <td>German</td>
                    <td>Dutch</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>3rd period</th>
                    <td></td>
                    <td>German</td>
                    <td></td>
                    <td>German</td>
                    <td>Dutch</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th>4th period</th>
                    <td></td>
                    <td>English</td>
                    <td></td>
                    <td>English</td>
                    <td>Dutch</td>
                    <td></td>
                    <td></td>
                </tr>
            </table> -->

            <table>
                <!-- 表格标题 -->
                <caption>How I chose to spend my money</caption>
                <!-- 表头 -->
                <thead>
                    <tr>
                        <th>Purchase</th>
                        <th>Location</th>
                        <th>Date</th>
                        <th>Evaluation</th>
                        <th>Cost (€)</th>
                    </tr>
                </thead>
                <!-- 表体 -->
                <tbody>
                    <tr>
                        <td>Haircut</td>
                        <td>Hairdresser</td>
                        <td>12/09</td>
                        <td>Great idea</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td>Lasagna</td>
                        <td>Restaurant</td>
                        <td>12/09</td>
                        <td>Regrets</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <td>Shoes</td>
                        <td>Shoeshop</td>
                        <td>13/09</td>
                        <td>Big regrets</td>
                        <td>65</td>
                    </tr>
                    <tr>
                        <td>Toothpaste</td>
                        <td>Supermarket</td>
                        <td>13/09</td>
                        <td>Good</td>
                        <td>5</td>
                    </tr>
                </tbody>
                <!-- 表尾 -->
                <tfoot>
                    <tr>
                        <td colspan="4">SUM</td>
                        <td>118</td>
                    </tr>
                </tfoot>
            </table>

            <table id="table1">
                <tr>
                  <th>title1</th>
                  <th>title2</th>
                  <th>title3</th>
                </tr>
                <tr>
                  <td>
                    <table id="table2">
                      <tr>
                        <td>cell1</td>
                        <td>cell2</td>
                        <td>cell3</td>
                      </tr>
                    </table>
                  </td>
                  <td>cell2</td>
                  <td>cell3</td>
                </tr>
                <tr>
                  <td>cell4</td>
                  <td>cell5</td>
                  <td>cell6</td>
                </tr>
              </table>

              <form action="/my-handing-form-page" action="post">
                <div>
                    <label for="name">Name:</label>
                    <input type="text" id="name">
                </div>
                <div>
                    <label for="mail">E-mail:</label>
                    <input type="email" id="mail">
                </div>
                <div>
                    <label for="msg">Message:</label>
                    <textarea id="msg"></textarea>
                </div>
            </form>

            <form>
                <fieldset>
                    <legend>Fruit juice size</legend>
                    <p>
                        <input type='radio' name='size' id='size_1' value='small'>
                        <label for="size_1">Small</label>
                    </p>
                    <p>
                        <input type='radio' name='size' id='size_2' value='middle'>
                        <label for="size_2">Middle</label>
                    </p>
                    <p>
                        <input type='radio' name='size' id='size_3' value='small'>
                        <label for="size_3">Large</label>
                    </p>
                </fieldset>
            </form>
    </body>
</html>